/*
  学习目标：JSX中使用插值表达式-对象和数组
  总结：React中的插值表达式
  1. 对象，不允许直接放jsx
  2. 数组，React中数组内的元素，会被当做一个个的虚拟DOM ，会渲染出来
     
*/
import React from 'react';
import ReactDOM from 'react-dom';

const list = [<div key={1}>aaa</div>, <div key={2}>bbb</div>, <div key={3}>ccc</div>];
const obj = {
  name: '123',
};
// 数组
const ulNode = (
  <div>
    {/* 💥React中JSX的插值表达式，不接收对象 */}
    {/* <h1>obj: {obj}</h1> */}

    {/* 💥React中数组内的元素，会被当做一个个的虚拟DOM ，会渲染出来*/}
    <h2>数组： {list}</h2>
    {/* <h2>字符串：aaabbbccc</h2> */}
  </div>
);

ReactDOM.render(ulNode, document.getElementById('root'));
